<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>pageUtil Demo</title>
		<link href="../css/qs.css" rel="stylesheet" type="text/css"/>
		<link href="../css/ui/pagination.css" rel="stylesheet" type="text/css"/>
		<style>
			.qs-pageutil a,.qs-pageutil-nav{display:inline-block;vertical-align:middle;}
			.qs-pageutil a{border:1px solid #ccc;background:#fff;min-width:10px;padding:3px 4px;text-align:center;margin:0 2px;}
			.qs-pageutil a:hover{background:#f0f0f0;}
			.qs-pageutil a.on{font-weight:bold;}
		</style>
		<script type="text/javascript" src="../lib/jquery.js"></script>
		<script type="text/javascript" src="../js/ui/pageUtil.js"></script>
	</head>
	<body oncontextmenu="return false;">
		<div class="container"></div>
		<input id="reset" type="button" value="reset"/>
		<script>
			var config={
				total:300,
				navSize:10,
				pageSize:33,
				curPage:1
			};
			var pageUtil=new Util.PageUtil($('.container'),{
				onClick:function(start,end){
					console.log(start,end);
				}
			});
			$('#reset').bind('click',function(){
				pageUtil.rebind(config);
			});
		</script>
	</body>
</html>
